<!DOCTYPE html>



  


<html class="theme-next pisces use-motion" lang="zh-Hans">
<head><meta name="generator" content="Hexo 3.9.0">
  <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="theme-color" content="#222">









<meta http-equiv="Cache-Control" content="no-transform">
<meta http-equiv="Cache-Control" content="no-siteapp">
















  
  
  <link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css">







<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css">

<link href="/css/main.css?v=5.1.4" rel="stylesheet" type="text/css">


  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16.png?v=5.1.4">


  <link rel="mask-icon" href="/images/logo.svg?v=5.1.4" color="#222">





  <meta name="keywords" content="Hexo, NexT">










<meta name="description" content="1. 前言1.1 环境我是使用vue-cli+webpack搭建vue开发环境 1.2 我的参考链接http://jspang.com/2017/04/13/vue-router/ 1.3 布署到本地服务器进入项目文件夹，然后使用命令行：npm start 再访问http://localhost:8080/就能在浏览器上看到网页了。每次更改直接保存就能看到更新的内容， 不用刷新浏览器。 2. 简单">
<meta property="og:type" content="article">
<meta property="og:title" content="Vue Router 使用总结">
<meta property="og:url" content="http://yoursite.com/2018/03/05/Vue-Router-使用总结/index.html">
<meta property="og:site_name" content="春风自是人间客">
<meta property="og:description" content="1. 前言1.1 环境我是使用vue-cli+webpack搭建vue开发环境 1.2 我的参考链接http://jspang.com/2017/04/13/vue-router/ 1.3 布署到本地服务器进入项目文件夹，然后使用命令行：npm start 再访问http://localhost:8080/就能在浏览器上看到网页了。每次更改直接保存就能看到更新的内容， 不用刷新浏览器。 2. 简单">
<meta property="og:locale" content="zh-Hans">
<meta property="og:updated_time" content="2020-07-26T14:24:06.084Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Vue Router 使用总结">
<meta name="twitter:description" content="1. 前言1.1 环境我是使用vue-cli+webpack搭建vue开发环境 1.2 我的参考链接http://jspang.com/2017/04/13/vue-router/ 1.3 布署到本地服务器进入项目文件夹，然后使用命令行：npm start 再访问http://localhost:8080/就能在浏览器上看到网页了。每次更改直接保存就能看到更新的内容， 不用刷新浏览器。 2. 简单">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/',
    scheme: 'Pisces',
    version: '5.1.4',
    sidebar: {"position":"left","display":"post","offset":12,"b2t":false,"scrollpercent":false,"onmobile":false},
    fancybox: true,
    tabs: true,
    motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},
    duoshuo: {
      userId: '0',
      author: '博主'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: "",
      labels: ""
    }
  };
</script>



  <link rel="canonical" href="http://yoursite.com/2018/03/05/Vue-Router-使用总结/">





  <title>Vue Router 使用总结 | 春风自是人间客</title>
  








</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">

  
  
    
  

  <div class="container sidebar-position-left page-post-detail">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta ">
    

    <div class="custom-logo-site-title">
      <a href="/" class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">春风自是人间客</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
      
        <h1 class="site-subtitle" itemprop="description">是非成败转头空，青山依旧在，几度夕阳红。</h1>
      
  </div>

  <div class="site-nav-toggle">
    <button>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/" rel="section">
            
            首页
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/archives" rel="section">
            
            归档
          </a>
        </li>
      
        
        <li class="menu-item menu-item-categories">
          <a href="/categories" rel="section">
            
            分类
          </a>
        </li>
      
        
        <li class="menu-item menu-item-program">
          <a href="/categories/program" rel="section">
            
            程序
          </a>
        </li>
      
        
        <li class="menu-item menu-item-reading">
          <a href="/categories/reading" rel="section">
            
            阅读
          </a>
        </li>
      
        
        <li class="menu-item menu-item-idea">
          <a href="/categories/idea" rel="section">
            
            想法
          </a>
        </li>
      
        
        <li class="menu-item menu-item-tags">
          <a href="/tags" rel="section">
            
            标签
          </a>
        </li>
      
        
        <li class="menu-item menu-item-about">
          <a href="/about" rel="section">
            
            关于我
          </a>
        </li>
      

      
    </ul>
  

  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="http://yoursite.com/2018/03/05/Vue-Router-使用总结/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="彭丹丹">
      <meta itemprop="description" content>
      <meta itemprop="image" content="https://upload.jianshu.io/users/upload_avatars/830956/debe5156eed7?imageMogr2/auto-orient/strip|imageView2/1/w/240/h/240">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="春风自是人间客">
    </span>

    
      <header class="post-header">

        
        
          <h2 class="post-title" itemprop="name headline">Vue Router 使用总结</h2>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2018-03-05T13:21:38+08:00">
                2018-03-05
              </time>
            

            

            
          </span>

          
            <span class="post-category">
            
              <span class="post-meta-divider">|</span>
            
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              
                <span class="post-meta-item-text">分类于</span>
              
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/program/" itemprop="url" rel="index">
                    <span itemprop="name">program</span>
                  </a>
                </span>

                
                
              
            </span>
          

          
            
          

          
          

          

          
            <div class="post-wordcount">
              
                
                <span class="post-meta-item-icon">
                  <i class="fa fa-file-word-o"></i>
                </span>
                
                  <span class="post-meta-item-text">字数统计&#58;</span>
                
                <span title="字数统计">
                  1,603
                </span>
              

              
                <span class="post-meta-divider">|</span>
              

              
                <span class="post-meta-item-icon">
                  <i class="fa fa-clock-o"></i>
                </span>
                
                  <span class="post-meta-item-text">阅读时长 &asymp;</span>
                
                <span title="阅读时长">
                  8
                </span>
              
            </div>
          

          
          
        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        <h1 id="1-前言"><a href="#1-前言" class="headerlink" title="1. 前言"></a>1. 前言</h1><h2 id="1-1-环境"><a href="#1-1-环境" class="headerlink" title="1.1 环境"></a>1.1 环境</h2><p>我是使用vue-cli+webpack搭建vue开发环境</p>
<h2 id="1-2-我的参考链接"><a href="#1-2-我的参考链接" class="headerlink" title="1.2 我的参考链接"></a>1.2 我的参考链接</h2><p><code>http://jspang.com/2017/04/13/vue-router/</code></p>
<h2 id="1-3-布署到本地服务器"><a href="#1-3-布署到本地服务器" class="headerlink" title="1.3 布署到本地服务器"></a>1.3 布署到本地服务器</h2><p>进入项目文件夹，然后使用命令行：<br><code>npm start</code></p>
<p>再访问<code>http://localhost:8080/</code>就能在浏览器上看到网页了。<br>每次更改直接保存就能看到更新的内容， 不用刷新浏览器。</p>
<h1 id="2-简单的路由跳转"><a href="#2-简单的路由跳转" class="headerlink" title="2. 简单的路由跳转"></a>2. 简单的路由跳转</h1><h2 id="2-1-新建"><a href="#2-1-新建" class="headerlink" title="2.1 新建"></a>2.1 新建</h2><p>首先在src/components文件夹下新建想跳转到的页面，名称为<code>Page1.vue</code></p>
<p>Page1.vue：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">	&lt;p&gt;新的页面&lt;/p&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line"></span><br><span class="line">&lt;style&gt;</span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure></p>
<h2 id="2-2-配置"><a href="#2-2-配置" class="headerlink" title="2.2 配置"></a>2.2 配置</h2><p>index.js<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">import Page1 from &apos;@/components/Page1&apos;</span><br><span class="line">……</span><br><span class="line">&#123;</span><br><span class="line">	path : &apos;/Page1&apos;,</span><br><span class="line">	name : &apos;Page1&apos;,</span><br><span class="line">	component : Page1</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<h2 id="2-3-跳转"><a href="#2-3-跳转" class="headerlink" title="2.3 跳转"></a>2.3 跳转</h2><p><code>&lt;router-link to=&quot;/Page1&quot;&gt;诗词&lt;/router-link&gt;</code></p>
<h1 id="3-vue-router传参"><a href="#3-vue-router传参" class="headerlink" title="3. vue-router传参"></a>3. vue-router传参</h1><h2 id="3-1-通过-标签中的to传参"><a href="#3-1-通过-标签中的to传参" class="headerlink" title="3.1 通过 标签中的to传参"></a>3.1 通过<router-link> 标签中的to传参</router-link></h2><p>用<router-link>标签中的to属性进行传参，写成:to</router-link></p>
<p><code>&lt;router-link :to=&quot;{name:&#39;Page1&#39;,params:{username:&#39;彭丹丹&#39;}}&quot;&gt;找宝宝并用link to传参&lt;/router-link&gt;</code></p>
<p>接收：</p>
<p><code>&lt;p&gt;&lt;/p&gt;</code></p>
<h2 id="3-2-vue-router-利用url传递参数"><a href="#3-2-vue-router-利用url传递参数" class="headerlink" title="3.2 vue-router 利用url传递参数"></a>3.2 vue-router 利用url传递参数</h2><p>:冒号的形式传递参数</p>
<p>index.js<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    path:&apos;/params/:newsId/:newsTitle&apos;,</span><br><span class="line">     component:Params</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<p>接收：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">        &lt;h2&gt;&#123;&#123; msg &#125;&#125;&lt;/h2&gt;</span><br><span class="line">        &lt;p&gt;新闻ID：&#123;&#123; $route.params.newsId&#125;&#125;&lt;/p&gt;</span><br><span class="line">        &lt;p&gt;新闻标题：&#123;&#123; $route.params.newsTitle&#125;&#125;&lt;/p&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br></pre></td></tr></table></figure></p>
<p>传递：<br><code>&lt;router-link to=&quot;/params/198/jspang website is very good&quot;&gt;params&lt;/router-link&gt;</code></p>
<p>tips:正则<br><code>path:&#39;/params/:newsId(\\d+)/:newsTitle&#39;</code></p>
<h1 id="4-单页面多路由区域操作"><a href="#4-单页面多路由区域操作" class="headerlink" title="4. 单页面多路由区域操作"></a>4. 单页面多路由区域操作</h1><p>app.vue<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;router-view &gt;&lt;/router-view&gt;</span><br><span class="line"> &lt;router-view name=&quot;left&quot; style=&quot;float:left;width:50%;background-color:#ccc;height:300px;&quot;&gt;&lt;/router-view&gt;</span><br><span class="line"> &lt;router-view name=&quot;right&quot; style=&quot;float:right;width:50%;background-color:#c0c;height:300px;&quot;&gt;&lt;/router-view&gt;</span><br></pre></td></tr></table></figure></p>
<p>index.js<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line">import Vue from &apos;vue&apos;</span><br><span class="line">import Router from &apos;vue-router&apos;</span><br><span class="line">import Hello from &apos;@/components/Hello&apos;</span><br><span class="line">import Hi1 from &apos;@/components/Hi1&apos;</span><br><span class="line">import Hi2 from &apos;@/components/Hi2&apos;</span><br><span class="line"> </span><br><span class="line">Vue.use(Router)</span><br><span class="line"> </span><br><span class="line">export default new Router(&#123;</span><br><span class="line">  routes: [</span><br><span class="line">    &#123;</span><br><span class="line">      path: &apos;/&apos;,</span><br><span class="line">      components: &#123;</span><br><span class="line">        default:Hello,</span><br><span class="line">        left:Hi1,</span><br><span class="line">        right:Hi2</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;,&#123;</span><br><span class="line">      path: &apos;/Hi&apos;,</span><br><span class="line">      components: &#123;</span><br><span class="line">        default:Hello,</span><br><span class="line">        left:Hi2,</span><br><span class="line">        right:Hi1</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line"> </span><br><span class="line">  ]</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure></p>
<p>最后在App.vue中配置我们的<router-link>就可以了</router-link></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&lt;router-link to=&quot;/&quot;&gt;首页&lt;/router-link&gt; | </span><br><span class="line">&lt;router-link to=&quot;/hi&quot;&gt;Hi页面&lt;/router-link&gt; |</span><br></pre></td></tr></table></figure>
<p>最后：app.vue的结构如下：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div id=&quot;app&quot; class=&quot;shi&quot;&gt;</span><br><span class="line">   &lt;nav&gt;</span><br><span class="line">			&lt;ul&gt;</span><br><span class="line">				&lt;li&gt;&lt;router-link to=&quot;/Shi&quot;&gt;诗词&lt;/router-link&gt;&lt;/li&gt;</span><br><span class="line">				&lt;li&gt;&lt;router-link to=&quot;/PengDan&quot;&gt;找彭丹&lt;/router-link&gt;&lt;/li&gt;</span><br><span class="line">				&lt;li&gt;&lt;router-link to=&quot;/RuoHua&quot;&gt;找若华&lt;/router-link&gt;&lt;/li&gt;</span><br><span class="line">			&lt;/ul&gt;</span><br><span class="line">		&lt;/nav&gt;</span><br><span class="line">		 &lt;router-view &gt;&lt;/router-view&gt;</span><br><span class="line">		 &lt;router-view name=&quot;left&quot; style=&quot;float:left;width:50%;background-color:#ccc;height:300px;&quot;&gt;&lt;/router-view&gt;</span><br><span class="line">		 &lt;router-view name=&quot;right&quot; style=&quot;float:right;width:50%;background-color:#c0c;height:300px;&quot;&gt;&lt;/router-view&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br></pre></td></tr></table></figure></p>
<h1 id="5-vue-router-的重定向-redirect"><a href="#5-vue-router-的重定向-redirect" class="headerlink" title="5. vue-router 的重定向-redirect"></a>5. vue-router 的重定向-redirect</h1><h2 id="5-1-redirect基本重定向"><a href="#5-1-redirect基本重定向" class="headerlink" title="5.1 redirect基本重定向"></a>5.1 redirect基本重定向</h2><p>index.js<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">routes: [</span><br><span class="line">  &#123;</span><br><span class="line">    path: &apos;/&apos;,</span><br><span class="line">    component: Hello</span><br><span class="line">  &#125;,&#123;</span><br><span class="line">    path:&apos;/goback&apos;,</span><br><span class="line">    redirect:&apos;/&apos;</span><br><span class="line">  &#125; </span><br><span class="line">]</span><br></pre></td></tr></table></figure></p>
<p>任意页面<br><code>&lt;router-link to=&quot;/goHome&quot;&gt;去首页&lt;/router-link&gt;</code></p>
<h2 id="5-2-重定向时传递参数"><a href="#5-2-重定向时传递参数" class="headerlink" title="5.2 重定向时传递参数"></a>5.2 重定向时传递参数</h2><p>index.js<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  path:&apos;/params/:newsId(\\d+)/:newsTitle&apos;,</span><br><span class="line">  component:Params</span><br><span class="line">&#125;,&#123;</span><br><span class="line">  path:&apos;/goParams/:newsId(\\d+)/:newsTitle&apos;,</span><br><span class="line">  redirect:&apos;/params/:newsId(\\d+)/:newsTitle&apos;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<p>任意页面<br><code>&lt;router-link to=&quot;/goRuoHua/55/妈妈&quot;&gt;去首页并用重定向传参&lt;/router-link&gt;</code></p>
<h1 id="6-alias别名的使用"><a href="#6-alias别名的使用" class="headerlink" title="6. alias别名的使用"></a>6. alias别名的使用</h1><h2 id="6-1-使用"><a href="#6-1-使用" class="headerlink" title="6.1 使用"></a>6.1 使用</h2><p>index.js<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    path: &apos;/Page1&apos;,</span><br><span class="line">    component: Page1,</span><br><span class="line">    alias:&apos;/aboutMe&apos;</span><br><span class="line"> &#125;</span><br></pre></td></tr></table></figure></p>
<p>任意页面<br><code>&lt;router-link to=&quot;/Page1&quot;&gt;去“关于我”的页面&lt;/router-link&gt;</code></p>
<h2 id="6-2-redirect和alias的区别"><a href="#6-2-redirect和alias的区别" class="headerlink" title="6.2 redirect和alias的区别"></a>6.2 redirect和alias的区别</h2><ul>
<li>redirect：仔细观察URL，redirect是直接改变了url的值，把url变成了真实的path路径。</li>
<li>alias：URL路径没有别改变，这种情况更友好，让用户知道自己访问的路径，只是改变了<router-view>中的内容。</router-view></li>
</ul>
<h2 id="6-3-tips"><a href="#6-3-tips" class="headerlink" title="6.3 tips"></a>6.3 tips</h2><p>别名请不要用在path为’/’中，如下代码的别名是不起作用的。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  path: &apos;/&apos;,</span><br><span class="line">  component: Hello,</span><br><span class="line">  alias:&apos;/home&apos;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h1 id="7-路由的过渡动画"><a href="#7-路由的过渡动画" class="headerlink" title="7. 路由的过渡动画"></a>7. 路由的过渡动画</h1><h2 id="7-1-标签"><a href="#7-1-标签" class="headerlink" title="7.1 标签"></a>7.1 <transition>标签</transition></h2><p>在/src/App.vue文件里添加了<transition>标签，并给标签起了一个名字叫fade。</transition></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;transition name=&quot;fade&quot;&gt;</span><br><span class="line">  &lt;router-view &gt;&lt;/router-view&gt;</span><br><span class="line">&lt;/transition&gt;</span><br></pre></td></tr></table></figure>
<h2 id="7-2-css过渡类名："><a href="#7-2-css过渡类名：" class="headerlink" title="7.2 css过渡类名："></a>7.2 css过渡类名：</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">fade-enter:进入过渡的开始状态，元素被插入时生效，只应用一帧后立刻删除。</span><br><span class="line">fade-enter-active:进入过渡的结束状态，元素被插入时就生效，在过渡过程完成后移除。</span><br><span class="line">fade-leave:离开过渡的开始状态，元素被删除时触发，只应用一帧后立刻删除。</span><br><span class="line">fade-leave-active:离开过渡的结束状态，元素被删除时生效，离开过渡完成后被删除。</span><br></pre></td></tr></table></figure>
<p>如下使用：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">.fade-enter &#123;</span><br><span class="line">  opacity:0;</span><br><span class="line">&#125;</span><br><span class="line">.fade-leave&#123;</span><br><span class="line">  opacity:1;</span><br><span class="line">&#125;</span><br><span class="line">.fade-enter-active&#123;</span><br><span class="line">  transition:opacity .5s;</span><br><span class="line">&#125;</span><br><span class="line">.fade-leave-active&#123;</span><br><span class="line">  opacity:0;</span><br><span class="line">  transition:opacity .5s;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<h2 id="7-3-过渡模式mode"><a href="#7-3-过渡模式mode" class="headerlink" title="7.3 过渡模式mode"></a>7.3 过渡模式mode</h2><p>in-out:新元素先进入过渡，完成之后当前元素过渡离开。<br>out-in:当前元素先进行过渡离开，离开完成后新元素过渡进入。</p>
<h1 id="8-路由中mode的设置和404页面的处理"><a href="#8-路由中mode的设置和404页面的处理" class="headerlink" title="8. 路由中mode的设置和404页面的处理"></a>8. 路由中mode的设置和404页面的处理</h1><h2 id="8-1-mode的两个值"><a href="#8-1-mode的两个值" class="headerlink" title="8.1 mode的两个值"></a>8.1 mode的两个值</h2><pre><code>histroy:当你使用 history 模式时，地址址不再有“#”号，URL 就像正常的 url，例如 `http://jsapng.com/lms/`，也好看！
hash:默认’hash’值，但是hash看起来就像无意义的字符排列，不太好看也不符合我们一般的网址浏览习惯。
</code></pre><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">export default new Router(&#123;</span><br><span class="line">	mode : &apos;history&apos;,</span><br><span class="line">	  routes: [</span><br><span class="line">	    &#123;</span><br><span class="line">	      path: &apos;/&apos;,</span><br><span class="line">	      name: &apos;HelloWorld&apos;,</span><br><span class="line">	      components: &#123;</span><br><span class="line">	      	default : HelloWorld,</span><br><span class="line">	      	left : PengDan,</span><br><span class="line">	      	right :RuoHua</span><br><span class="line">	      &#125;</span><br><span class="line">	    &#125;</span><br><span class="line">	  ]</span><br><span class="line">    &#125;)</span><br></pre></td></tr></table></figure>
<h2 id="8-2-404页面的设置"><a href="#8-2-404页面的设置" class="headerlink" title="8.2 404页面的设置"></a>8.2 404页面的设置</h2><p>index.js</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">   path:&apos;*&apos;,</span><br><span class="line">   component:Error</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>新建404页面<br>    在/src/components/文件夹下新建一个Error.vue的文件。简单输入一些有关错误页面的内容。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">        &lt;h2&gt;&#123;&#123; msg &#125;&#125;&lt;/h2&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">export default &#123;</span><br><span class="line">  data () &#123;</span><br><span class="line">    return &#123;</span><br><span class="line">      msg: &apos;Error:404&apos;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
<p>当输入错的网址时就会有效果，同时自己写错了也会有。</p>
<p><code>&lt;router-link to=&quot;/bbbbbb&quot;&gt;我是瞎写的&lt;/router-link&gt;</code></p>
<h1 id="9-路由中的钩子"><a href="#9-路由中的钩子" class="headerlink" title="9. 路由中的钩子"></a>9. 路由中的钩子</h1><p>直接在路由配置文件（/src/router/index.js）中写钩子函数。但是在路由文件中我们只能写一个beforeEnter,就是在进入此路由配置时。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">      path:&apos;/params/:newsId(\\d+)/:newsTitle&apos;,</span><br><span class="line">      component:Params,</span><br><span class="line">      beforeEnter:(to,from,next)=&gt;&#123;</span><br><span class="line">        console.log(&apos;我进入了params模板&apos;);</span><br><span class="line">        console.log(to);</span><br><span class="line">        console.log(from);</span><br><span class="line">        next();</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>
<p>三个参数：</p>
<ul>
<li>to:路由将要跳转的路径信息，信息是包含在对像里边的。</li>
<li>from:路径跳转前的路径信息，也是一个对象的形式。</li>
<li>next:路由的控制参数，常用的有next(true)和next(false)。</li>
</ul>
<p>next()如果写false和注释它是一样的效果，都不能进入了。</p>
<h1 id="10-编程式导航"><a href="#10-编程式导航" class="headerlink" title="10. 编程式导航"></a>10. 编程式导航</h1><p><strong>this.$router.go(-1) 和 this.$router.go(1)</strong></p>
<p>App.vue</p>
<p><code>&lt;button @click=&quot;goback&quot;&gt;后退&lt;/button&gt;</code></p>
<p>相应的方法</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">export default &#123;</span><br><span class="line">  name: &apos;app&apos;,</span><br><span class="line">  methods:&#123;</span><br><span class="line">    goback()&#123;</span><br><span class="line">      this.$router.go(-1);</span><br><span class="line">    &#125;,</span><br><span class="line">    goHome()&#123;</span><br><span class="line">      this.$router.push(&apos;/&apos;);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>

      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      
      
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
              <a href="/2018/03/02/给3年后自己的一封信/" rel="next" title="给3年后自己的一封信">
                <i class="fa fa-chevron-left"></i> 给3年后自己的一封信
              </a>
            
          </div>

          <span class="post-nav-divider"></span>

          <div class="post-nav-prev post-nav-item">
            
              <a href="/2018/03/05/移动端适配方案/" rel="prev" title="移动端适配方案">
                移动端适配方案 <i class="fa fa-chevron-right"></i>
              </a>
            
          </div>
        </div>
      

      
      
    </footer>
  </div>
  
  
  
  </article>



    <div class="post-spread">
      
    </div>
  </div>


          </div>
          


          

  
    <div class="comments" id="comments">
      <div id="lv-container" data-id="city" data-uid="MTAyMC8zODk2OC8xNTQ5Ng=="></div>
    </div>

  



        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap">
            文章目录
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview-wrap">
            站点概览
          </li>
        </ul>
      

      <section class="site-overview-wrap sidebar-panel">
        <div class="site-overview">
          <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
            
              <img class="site-author-image" itemprop="image" src="https://upload.jianshu.io/users/upload_avatars/830956/debe5156eed7?imageMogr2/auto-orient/strip|imageView2/1/w/240/h/240" alt="彭丹丹">
            
              <p class="site-author-name" itemprop="name">彭丹丹</p>
              <p class="site-description motion-element" itemprop="description"></p>
          </div>

          <nav class="site-state motion-element">

            
              <div class="site-state-item site-state-posts">
              
                <a href="/archives">
              
                  <span class="site-state-item-count">183</span>
                  <span class="site-state-item-name">日志</span>
                </a>
              </div>
            

            
              
              
              <div class="site-state-item site-state-categories">
                <a href="/categories/index.html">
                  <span class="site-state-item-count">3</span>
                  <span class="site-state-item-name">分类</span>
                </a>
              </div>
            

            

          </nav>

          

          

          
          

          
          

          

        </div>
      </section>

      
      <!--noindex-->
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">

            
              
            

            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#1-前言"><span class="nav-number">1.</span> <span class="nav-text">1. 前言</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#1-1-环境"><span class="nav-number">1.1.</span> <span class="nav-text">1.1 环境</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#1-2-我的参考链接"><span class="nav-number">1.2.</span> <span class="nav-text">1.2 我的参考链接</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#1-3-布署到本地服务器"><span class="nav-number">1.3.</span> <span class="nav-text">1.3 布署到本地服务器</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#2-简单的路由跳转"><span class="nav-number">2.</span> <span class="nav-text">2. 简单的路由跳转</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#2-1-新建"><span class="nav-number">2.1.</span> <span class="nav-text">2.1 新建</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2-2-配置"><span class="nav-number">2.2.</span> <span class="nav-text">2.2 配置</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2-3-跳转"><span class="nav-number">2.3.</span> <span class="nav-text">2.3 跳转</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#3-vue-router传参"><span class="nav-number">3.</span> <span class="nav-text">3. vue-router传参</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#3-1-通过-标签中的to传参"><span class="nav-number">3.1.</span> <span class="nav-text">3.1 通过 标签中的to传参</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3-2-vue-router-利用url传递参数"><span class="nav-number">3.2.</span> <span class="nav-text">3.2 vue-router 利用url传递参数</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#4-单页面多路由区域操作"><span class="nav-number">4.</span> <span class="nav-text">4. 单页面多路由区域操作</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#5-vue-router-的重定向-redirect"><span class="nav-number">5.</span> <span class="nav-text">5. vue-router 的重定向-redirect</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#5-1-redirect基本重定向"><span class="nav-number">5.1.</span> <span class="nav-text">5.1 redirect基本重定向</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#5-2-重定向时传递参数"><span class="nav-number">5.2.</span> <span class="nav-text">5.2 重定向时传递参数</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#6-alias别名的使用"><span class="nav-number">6.</span> <span class="nav-text">6. alias别名的使用</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#6-1-使用"><span class="nav-number">6.1.</span> <span class="nav-text">6.1 使用</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#6-2-redirect和alias的区别"><span class="nav-number">6.2.</span> <span class="nav-text">6.2 redirect和alias的区别</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#6-3-tips"><span class="nav-number">6.3.</span> <span class="nav-text">6.3 tips</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#7-路由的过渡动画"><span class="nav-number">7.</span> <span class="nav-text">7. 路由的过渡动画</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#7-1-标签"><span class="nav-number">7.1.</span> <span class="nav-text">7.1 标签</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#7-2-css过渡类名："><span class="nav-number">7.2.</span> <span class="nav-text">7.2 css过渡类名：</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#7-3-过渡模式mode"><span class="nav-number">7.3.</span> <span class="nav-text">7.3 过渡模式mode</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#8-路由中mode的设置和404页面的处理"><span class="nav-number">8.</span> <span class="nav-text">8. 路由中mode的设置和404页面的处理</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#8-1-mode的两个值"><span class="nav-number">8.1.</span> <span class="nav-text">8.1 mode的两个值</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#8-2-404页面的设置"><span class="nav-number">8.2.</span> <span class="nav-text">8.2 404页面的设置</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#9-路由中的钩子"><span class="nav-number">9.</span> <span class="nav-text">9. 路由中的钩子</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#10-编程式导航"><span class="nav-number">10.</span> <span class="nav-text">10. 编程式导航</span></a></li></ol></div>
            

          </div>
        </section>
      <!--/noindex-->
      

      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<div class="copyright">&copy; <span itemprop="copyrightYear">2020</span>
  <span class="with-love">
    <i class="fa fa-user"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">彭丹丹</span>

  
</div>


	<div class="powered-by">
	<i class="fa fa-user-md"></i><span id="busuanzi_container_site_uv">
	  本站访客数:<span id="busuanzi_value_site_uv"></span>
	</span>
	</div>
  <div class="powered-by">由 <a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a> 强力驱动</div>



  <span class="post-meta-divider">|</span>



  <div class="theme-info">主题 &mdash; <a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">NexT.Pisces</a> v5.1.4</div>




        







        
      </div>
    </footer>

    
      <div class="back-to-top">
        <i class="fa fa-arrow-up"></i>
        
      </div>
    

    

  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  












  
  
    <script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script>
  

  
  
    <script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>
  

  
  
    <script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
  


  


  <script type="text/javascript" src="/js/src/utils.js?v=5.1.4"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=5.1.4"></script>



  
  


  <script type="text/javascript" src="/js/src/affix.js?v=5.1.4"></script>

  <script type="text/javascript" src="/js/src/schemes/pisces.js?v=5.1.4"></script>



  
  <script type="text/javascript" src="/js/src/scrollspy.js?v=5.1.4"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=5.1.4"></script>



  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.4"></script>



  


  




	





  





  
    <script type="text/javascript">
      (function(d, s) {
        var j, e = d.getElementsByTagName(s)[0];
        if (typeof LivereTower === 'function') { return; }
        j = d.createElement(s);
        j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
        j.async = true;
        e.parentNode.insertBefore(j, e);
      })(document, 'script');
    </script>
  












  





  

  

  

  
  

  

  

  

  undefined
  
  <!-- 页面爆炸效果 -->
  
<script src="/live2dw/lib/L2Dwidget.min.js?0c58a1486de42ac6cc1c59c7d98ae887"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/tororo.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true}});</script></body>
</html>
